<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<title>Calendar</title>

		<link rel="stylesheet" type="text/css" href="css/main.css" />
		<link rel="stylesheet" type="text/css" href="css/calendar.css" />
		<style type="text/css">

		</style>
	</head>
	<body>

	<div id="xxx"></div>

	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="js/utils.js"></script>
	<script type="text/javascript">
	var Calendar=function(config){
		this.renderTo=$(config.renderTo);
		this.today=config.today;

		this.init();
		this.render();
	};
	Calendar.prototype={
		init:function(){
			this.renderTo.append('<div class="calendar"><div class="ctrl"><ul><li class="v p vyr"></li><li class="tyr">2011</li><li class="v n vyr"></li><li class="s"></li><li class="v p vmo"></li><li class="tmo">9</li><li class="v n vmo"></li></ul></div><div class="calr"></div></div>');
			$(".vyr",this.renderTo).click($.proxy(function(ev){
				var yr=this.today.getFullYear();
				if($(ev.currentTarget).hasClass("p")){
					yr--;
				} else {
					yr++;
				}
				this.today = new Date(yr,this.today.getMonth(),this.today.getDate());
				this.render();
			},this));
			
			$(".vmo",this.renderTo).click($.proxy(function(ev){
				var mon=this.today.getMonth();
				if($(ev.currentTarget).hasClass("p")){
					mon--;
				} else {
					mon++;
				}
				this.today = new Date(this.today.getFullYear(),mon,this.today.getDate());
				this.render();
			},this));
		},
		render:function(){
			$(".tyr").text(this.today.getFullYear());
			$(".tmo").text(this.today.getMonth()+1);
			
			var sb=[];
			sb.push('<table>');
			sb.push('<tr class="wtitle">');
			for(var w=0;w<7;w++){
				if(w==0){
					sb.push('<td class="SUN">');
				} else if(w==6){
					sb.push('<td class="SAT">');
				} else {
					sb.push('<td>');
				}
				
				sb.push(Calendar.WEEKDAY[w]);
				sb.push('</td>');
			}
			sb.push('</tr>');

			var firstDay=new Date(this.today.getFullYear(),this.today.getMonth(),1);
			var lastDay=new Date(this.today.getFullYear(),this.today.getMonth()+1,0);
			var dateNum=Calendar.getDaysOfMonth(firstDay.getFullYear(),firstDay.getMonth()+1);
			var dateNumLastMonth=Calendar.getDaysOfMonth(firstDay.getFullYear(),firstDay.getMonth());
			var totalNum=dateNum+(6-lastDay.getDay());
			var weekdayCount=0;
			for(var i=0-firstDay.getDay();i<totalNum;i++){
				if(weekdayCount==0) {
					sb.push('<tr class="wday">');
				}

				if(i<0){
					sb.push('<td class="padding">'+(i+dateNumLastMonth+1)+'</td>');
				} else if (i>=dateNum) {
					sb.push('<td class="padding">'+(i-dateNum+1)+'</td>');
				} else {
					if(weekdayCount==0){
						sb.push('<td class="SUN">');
					} else if(weekdayCount==6){
						sb.push('<td class="SAT">');
					} else {
						sb.push('<td>');
					}
					
					sb.push(i+1);
					sb.push('</td>');
				}

				weekdayCount++;
				if(weekdayCount==7){
					sb.push('</tr>');
					weekdayCount=0;
				}
			}

			sb.push('</table>');
			$(".calendar>.calr",this.renderTo).empty().append(sb.join(""));
		}
	};
	Calendar.WEEKDAY=['SUN','MON','TUE','WED','THU','FRI','SAT'];
	Calendar.getDaysOfMonth=function(year,month)
    {
        if (month == 2)
        {
            if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0)
            {
                return 29;
            }
            else
            {
                return 28;
            }
        }
        else
        {
            month -= (month > 7?7:0);
            return 30 + month % 2;
        }
    };
	
	new Calendar({
		renderTo:$("#xxx")[0],
		today:new Date()
	});
	</script>
	</body>
</html>